<template>
	<scroll-view class="children-list d-f pt20 pb10" scroll-x>
		<view
			v-if="childList.length > 0"
			class="child-card br28 pt35 pb35 pl30 pr30 mr30 tc"
			v-for="(item, index) in childList"
			:key="index"
			@click="jump(`/pages/setting/child?title=修改子女信息&item=${JSON.stringify(item)}`)"
		>
			<view class="child-avatar d-c-c white mb30">
				<i class="iconfont icon-xiaoren f48"></i>
			</view>
			<view class="child-name f32 fb mb10 vertical">{{ item.studentName }}</view>
			<view class="child-age f26 pl20 pr20 pt5 pb5 br24 mr10">{{ item.age }}岁</view>
			<!-- <view class="child-tag f24 mt15 br24 pt5 pb5 pl20 pr20">{{ item.status }}</view> -->
		</view>
		<view class="child-card d-c-c d-c br28 pt35 pb35 pl30 pr30 mr30 tc add-child hh100" @click="jump('/pages/setting/child?title=添加子女信息')">
			<i class="iconfont icon-jia mt60" style="font-size: 28px; margin-bottom: 12px"></i>
			<view class="mt10">添加子女</view>
		</view>
	</scroll-view>
</template>

<script>
export default {
	name: 'child',
	props:['childList'],
	data() {
		return {
		};
	},
	created() {
		// this.getList();
	},
	mounted() {
		// this.getList();
	},
	methods: {
		// async getList() {
		// 	const res = await this.$request({
		// 		url: this.$api.parent,
		// 		data: {
		// 			parentId: uni.getStorageSync('user').id
		// 		}
		// 	});
		// 	this.childList = res;
		// }
	}
};
</script>

<style scoped lang="scss">
.children-list {
	white-space: nowrap;
	
	.child-card {
		height: 320rpx;
		display: inline-block;
		width: 280rpx;
		background: linear-gradient(to bottom, #f8faff, #ffffff);
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.03);
		border: 1px solid #f0f5ff;
		overflow: hidden;
		position: relative;
		&:before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 8rpx;
			background: linear-gradient(to right, #3498db, #2ecc71);
		}
		.child-avatar {
			margin-left: auto;
			margin-right: auto;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
			box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.1);
		}
		.child-name {
			color: #2c3e50;
		}
		.child-age {
			color: #7f8c8d;
			background: rgba(236, 240, 241, 0.5);
			display: inline-block;
		}
		.child-tag {
			display: inline-block;
			background: #e8f4ff;
			color: #3498db;
		}
	}
	.add-child {
		padding-top: 100rpx;
		height: 320rpx;
		background: linear-gradient(to bottom, #e8f4ff, #ffffff);
		color: #3498db;
		border: 1px dashed #3498db;
	}
}
</style>
